<script setup>
import {
    Edit,Delete,Position,Upload
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
    addpathservice, getallbookservice,getpartpathservice,
    updatepathservice, detailbookservice, deletepathservice, lendbookservice, getallbookcategoryservice
} from '@/api/book.js'
import {  BaiduMap, BmlLushu } from 'vue-baidu-map-3x';

//控制添加分类弹窗
const dialogVisible = ref(false)
//分页条数据模型
//const pageNum = ref(1)//当前页
const total = ref(20)//总条数
//const pageSize = ref(3)//每页条数
//文章分类数据模型

//定义变量，控制标题
const title = ref('')

//交通路线列表数据模型
const paths = ref([])

const allpavementType = ref(['沥青路面','水泥混凝土路面'])
const allpathType = ref(['车行道'])
const alllevel = ref(['I等养护','II等养护','III等养护'])
//与后端交互的json数据
const pathmodel = ref({
    id:null,
    pathName:null,
    pavementType:null,
    startAddress:null,
    endAddress:null,
    pathType:null,
    designUnit:null,
    belong:null,
    longth:null,
    velocity:null,
    level1:null
})

const findmodel = ref({
    pageNum: 1,
    pageSize: 20,
    str: ''
})
const pathlist = async () => {
    console.log(findmodel.value);
    let result = await getpartpathservice(findmodel.value);
    console.log(result);
    total.value = result.data.total;
    paths.value = result.data.items;
}
pathlist();
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    findmodel.value.pageSize = size;
    pathlist();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    findmodel.value.pageNum = num;
    pathlist();
}
const cleardata = () => {
    findmodel.value.startPoint = '',
    findmodel.value.endPoint = '',
    findmodel.value.str = ''
}
//表单校验
const rules = {
    pathName: [
        { required: true, message: '请输入道路名称', trigger: 'blur' },
    ],
    pavementType: [
        { required: true, message: '请选择路面类型', trigger: 'blur' },
    ],
    startAddress: [
        { required: true, message: '请输入起始地址', trigger: 'blur' },
    ],
    endAddress: [
        { required: true, message: '请输入结束地址', trigger: 'blur' },
    ],
    pathType: [
        { required: true, message: '请选择道路类型', trigger: 'blur' },
    ],
    designUnit: [
        { required: true, message: '请输入设计单位', trigger: 'blur' },
    ],
    belong: [
        { required: true, message: '请输入所属乡镇', trigger: 'blur' },
    ],
    longth: [
        { required: true, message: '请输入道路总长', trigger: 'blur' },
    ],
    velocity: [
        { required: true, message: '请输入道路时速', trigger: 'blur' },
    ],
    level1: [
        { required: true, message: '请输入养护等级', trigger: 'blur' },
    ],
}
const add = () => {
    pathmodel.value.pathName = null
    pathmodel.value.pavementType = null
    pathmodel.value.startAddress = null
    pathmodel.value.endAddress = null
    pathmodel.value.pathType = null
    pathmodel.value.designUnit = null
    pathmodel.value.belong = null
    pathmodel.value.longth = null
    pathmodel.value.velocity = null
    pathmodel.value.level1 = null
    dialogVisible.value = true;
    title.value = '添加道路'
}
const addpath = async () => {
    console.log(pathmodel.value);
    let result = await addpathservice(pathmodel.value);
    if (result.code == 0) {
        ElMessage.success("添加成功")
        dialogVisible.value = false;
        pathlist();
    }
    else {
        ElMessage.error(result.message ? result.message : '添加失败')
    }
}
const updatepath = async () => {
    console.log(pathmodel.value);
    let result = await updatepathservice(pathmodel.value);
    if (result.code == 0) {
        ElMessage.success("修改成功")
        dialogVisible.value = false;
        pathlist();
    }
    else {
        ElMessage.error(result.message ? result.message : '修改失败')
    }
}
//删除分类
const del = (row) => {
    ElMessageBox.confirm(
        '你确认删除该条道路信息吗？',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            //用户点击了确认
            let result = await deletepathservice(row.id)
            if(result.code!=0) ElMessage.error(result.message ? result.message : '删除失败')
            else ElMessage.success('删除成功')
            //再次调用getAllCategory，获取所有文章分类
            pathlist();
        })
        .catch(() => {
            //用户点击了取消
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//展示编辑弹窗
const showDialog = (row) => {
    title.value = '编辑道路信息';
    dialogVisible.value = true;
    //数据拷贝

    pathmodel.value.pathName = row.pathName
    pathmodel.value.pavementType = row.pavementType
    pathmodel.value.startAddress = row.startAddress
    pathmodel.value.endAddress = row.endAddress
    pathmodel.value.pathType = row.pathType
    pathmodel.value.designUnit = row.designUnit
    pathmodel.value.belong = row.belong
    pathmodel.value.longth = row.longth
    pathmodel.value.velocity = row.velocity
    pathmodel.value.level1 = row.level1
    //扩展i的属性，将来需要传递给后台，完成分类的修改
    pathmodel.value.id = row.id;
    console.log(row.id);
}
const xx = ref(false)
const change = ()=>{
    xx.value = true;
}
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>道路信息管理</span>
                <div class="extra">
                    <el-button type="primary" @click="add">添加道路</el-button>
                </div>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>

            <el-form-item label="查询条件：">
                <el-input v-model="findmodel.str" placeholder="请输入查询内容" width="200"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="pathlist">搜索</el-button>
                <el-button @click="cleardata">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="paths" style="width: 100%">
            <el-table-column label="道路编码" prop="id" width="80"></el-table-column>
            <el-table-column label="道路名称" prop="pathName" ></el-table-column>
            <el-table-column label="路面类型" prop="pavementType" ></el-table-column>
            <el-table-column label="起始地址" prop="startAddress" ></el-table-column>
            <el-table-column label="结束地址" prop="endAddress" > </el-table-column>
            <el-table-column label="道路类型" prop="pathType" > </el-table-column>
            <el-table-column label="设计单位" prop="designUnit" > </el-table-column>
            <el-table-column label="所属乡镇" prop="belong" > </el-table-column>
            <el-table-column label="道路总长(km)" prop="longth" width="115"> </el-table-column>
            <el-table-column label="时速(km/h)" prop="velocity" width="110"> </el-table-column>
            <el-table-column label="养护等级" prop="level1" > </el-table-column>
            <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <!-- <el-button :icon="Position" circle plain @click="showlendDialog(row)"></el-button> -->
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="del(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination v-model:current-page="findmodel.pageNum" v-model:page-size="findmodel.pageSize"
            :page-sizes="[20, 30, 40, 50]" layout="jumper, total, sizes, prev, pager, next" background :total="total"
            @size-change="onSizeChange" @current-change="onCurrentChange"
            style="margin-top: 20px; justify-content: flex-end" />
    </el-card>
    <!-- 添加分类弹窗 -->
    <el-dialog v-model="dialogVisible" :title="title" width="40%">
        <el-form :model="pathmodel" :rules="rules" label-width="120px" style="padding-right: 30px">
            <el-form-item label="道路名称" prop="pathName" >
                <el-input v-model="pathmodel.pathName"></el-input>
            </el-form-item>
            <el-form-item label="路面类型" prop="pavementType">
                <el-select placeholder="请选择路面类型" v-model="pathmodel.pavementType">
                    <el-option v-for="c in allpavementType" :key="c" :label="c" :value="c">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="起始地址" prop="startAddress">         
                    <el-input v-model="pathmodel.startAddress"></el-input>
                    <!-- <el-button @click="change">打开地图</el-button> -->
            </el-form-item>
            <el-form-item label="结束地址" prop="endAddress">         
                    <el-input v-model="pathmodel.endAddress"></el-input>
            </el-form-item>
            <el-form-item label="道路类型" prop="pathType">         
                <el-select placeholder="请选择道路类型" v-model="pathmodel.pathType">
                    <el-option v-for="c in allpathType" :key="c" :label="c" :value="c">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="养护等级" prop="level1">         
                <el-select placeholder="请选择养护等级" v-model="pathmodel.level1">
                    <el-option v-for="c in alllevel" :key="c" :label="c" :value="c">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="设计单位" prop="designUnit">         
                    <el-input v-model="pathmodel.designUnit"></el-input>
            </el-form-item>
            <el-form-item label="所属乡镇" prop="belong">         
                    <el-input v-model="pathmodel.belong"></el-input>
            </el-form-item>
            <el-form-item label="道路总长(km)" prop="longth">         
                    <el-input v-model="pathmodel.longth"></el-input>
            </el-form-item>
            <el-form-item label="时速(km/h)" prop="velocity">         
                    <el-input v-model="pathmodel.velocity"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="title == '添加道路' ? addpath() : updatepath()"> 确认 </el-button>
            </span>
        </template>

    </el-dialog>
    <el-dialog v-model="xx" :title="title" width="40%">
        <baidu-map class="bm-view" :zoom="10" :center="{ lng: 116.404, lat: 39.915 }" :scroll-wheel-zoom="true" >
            <!-- <bm-driving  :start="lushuPoint.start" :end="lushuPoint.end" @searchcomplete="handleSearchComplete" :panel="false" :autoViewport="true"></bm-driving> -->
            
          </baidu-map>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="xx = false">取消</el-button>
                <el-button type="primary" @click="title == '添加道路' ? addpath() : updatepath()"> 确认 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        startTime: '',
        endTime: ''
      };
    }
  }
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>